<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div id="main" style="width: 1000px;height:600px;"></div>

	</body>
	<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js" type="text/javascript" charset="utf-8"></script>
	
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		getHouse()
		function getHouse() {
			$.ajax({
				type: "get",
//				url: "http://120.48.109.174:8081/area/map",
				url: "js/citys.json",
				async: true,
//				data: {
//					"id": "AREA|88cff55c-aaa4-e2e0"
//				},
				success: function(res) {
					console.log(res)
					var areas = [];
					var count = [];
					res.body.forEach(function(item){
						areas.push(item.label);
						count.push(item.count);
					})
					tubiao(areas,count)
				}
			});
		}

		//图标
		function tubiao(areas,count) {
			var myChart = echarts.init(document.getElementById("main"));
			// 指定图表的配置项和数据
			var option = {
				title: {
					text: '北京市各区域房屋数量分析'
				},
				tooltip: {},
				legend: {
					data: ['房子数量']
				},
				xAxis: {
					data: areas
				},
				
				yAxis: {
					
				},
				series: [{
					name: '数量',
					type: 'bar',
					data: count
				}]
			};
			myChart.setOption(option)
		}
	</script>

</html>